<template>
  <div  :style="{ width: '100%', height: '100%', padding: '10px' }" >
    <div v-show="isshow" ref="myChart2" :style="{ width: '100%', height: '100%', padding: '10px' }" ></div>
    <!-- <div v-show="!isshow"><img  src="http://likede2-admin.itheima.net/img/empty.87c4f71b.png" alt=""><div>暂无数据</div></div> -->
  </div>
</template>

<script>
export default {
  props: ['data3'],
  created () {
    console.log('data3', this.data3)
    if (this.data3.length !== 0) {
      console.log('进了吗')
      console.log('接收的data2', this.data2)
      this.option.series[0].data = this.data3
    } else {
      this.isshow = false
    }
  },
  data () {
    return {
      isshow: true,
      option: {
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)' // 富文本标签
        },
        grid: {
          width: '54%',
          height: '30%'
        },
        // legend: {
        //   top: 'bottom'
        // },
        // toolbox: {//下载分享 保存 图片 功能
        //   show: true,
        //   feature: {
        //     mark: { show: true },
        //     dataView: { show: true, readOnly: false },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   }
        // },
        series: [
          {
            label: { formatter: '{b}: {d}%' },
            name: 'Nightingale Chart',
            type: 'pie',
            radius: ['30', '70'],
            center: ['50%', '50%'],
            roseType: 'radius',
            itemStyle: {
              borderRadius: 8
            },
            data: [
              { value: 40, name: 'rose 1' },
              { value: 38, name: 'rose 2' },
              { value: 32, name: 'rose 3' },
              { value: 30, name: 'rose 4' },
              { value: 28, name: 'rose 5' },
              { value: 26, name: 'rose 6' },
              { value: 22, name: 'rose 7' },
              { value: 18, name: 'rose 8' }
            ],
            legendHoverLink: true,
            emphasis: {
              scaleSize: 14
            },
            itemStyle: {
              borderRadius: [5, '0', '0', '0'],
              borderCap: 'square'
            },
            labelLine: {
              show: true,
              length: 15,
              length2: 15,
              minTurnAngle: 15
            }
          }
        ]
      }
    }
  },
  mounted () {
    // console.log('组件接收的data',this.data);

    if (this.data3.length !== 0) {
      this.isshow = true
      const myChart = this.$echarts.init(this.$refs.myChart2)
      console.log(myChart)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
      myChart.setOption(this.option, true)
      console.log('更新后的option', this.option)
    }
  }

}
</script>
<style scoped></style>
